<template>
  <div class="search">
    <div class="header flex_between m-32">
      <form action="javascript:void 0">
        <div class="inputNav">   
            <input type="text" v-model="content"  @keyup.13="searchType" placeholder="您想找什么" />
        </div>
      </form>
      <div class="cancel" @click="$router.history.go(-1)">取消</div>
    </div>
    <div class="title ml-30 mr-30 mt-40 mb-40">
      <h1 class="l">历史搜索</h1>
      <img src="../../public/images/qt_86.png" class="r" @click='removeLocal'/>
      <div class="clear"></div>
    </div>
    <ul class="tags ml-30 mr-30 flex flex-wrap" v-show='categoryList.length==0'>
      <li v-for="(item,index) in localHistory" :key="index" @click='content=item;searchType()'>{{item}}</li>
    </ul>

    <div class="centerNav">
      <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
      <van-list
        v-model="loading"
        :finished="finished"
        @load="onLoad"
        :immediate-check="false"
        finished-text="没有更多了"
      >
        <div v-if="$route.query.searchType=='0'">
          <div
            :class="index==0? 'tieActive tie' : 'tie' "
            v-for="(item,index) in categoryList"
            :key="index"
            @click="$router.push({path:'invitationContent',query:{postId:item.postId}})"
          >
            <div class="top mt-30">
              <img
                :src="item.userInfo.userPhoto"
                class="pic l"
                @click.stop="$router.push({path:'otherUser',query:{userId:item.userInfo.userId}})"
              />
              <div class="txt1 l">
                <div class="title">
                  <div class="name hide_other">{{item.userInfo.userName}}</div>
                  <div class="typeName" v-if="item.userInfo.roleName=='公众号'">公众号</div>
                  <div class="clear"></div>
                </div>
                <div class="time">{{item.dbCreateTime}}</div>
              </div>
              <img
                @click.stop="gz(item.userInfo.userId,item.userInfo.isFollow)"
                src="../../public/images/qt_50.png"
                v-if="item.userInfo.isFollow=='-1'"
                class="btn_gz r"
              />
              <img
                @click.stop="gz(item.userInfo.userId,item.userInfo.isFollow)"
                src="../../public/images/qt_53.png"
                v-else
                class="btn_gz r"
              />
              <div class="clear"></div>
            </div>
            <div class="txt2 hide_otherFour" v-if="item.txtStatus">
              {{item.content.slice(0,76)}}
              <span v-if="item.content.length>76" class="more" @click="item.txtStatus=false">查看更多>></span>
            </div>
            <div class="txt2" v-else>{{item.content}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=true'>收起</span></div>
            <div class="pic">
              <img v-for="(items,indexs) in item.images.slice(0,9)" :key="indexs" :src="items" />
            </div>
            <div class="bottom mt-30">
              <div class="peopleNum l">868人看到</div>
              <div class="otherNum2 r">
                <img src="../../public/images/qt_80.png" />
                {{item.thumbUpNum}}
              </div>
              <div class="otherNum1 r mr-50">
                <img src="../../public/images/qt_78.png" />
                {{item.commentNum}}
              </div>
              <div class="clear"></div>
            </div>
          </div>
        </div>
        <div v-else-if="$route.query.searchType=='1'">
          <div class="tie goodsdlq" v-for="(item,index) in categoryList" :key="index">
            <div class="top mt-30">
              <img
                :src="item.userInfo.userPhoto"
                class="pic l"
                @click.stop="$router.push({path:'otherUser',query:{userId:item.userInfo.userId}})"
              />
              <div class="txt1 l">
                <div class="title">
                  <div class="name hide_other">{{item.userInfo.userName}}</div>
                  <div class="clear"></div>
                </div>
                <div class="time">{{item.dbCreateTime}}</div>
              </div>
              <div class="clear"></div>
            </div>
            <div class="txt2 hide_otherFour" v-if="item.txtStatus">
              {{item.content.slice(0,76)}}
              <span v-if="item.content.length>76" class="more" @click="item.txtStatus=false">查看更多>></span>
            </div>
            <div class="txt2" v-else>{{item.content}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=true'>收起</span></div>
            <p class="goodsMessage hide_other">
              物品：
              <span>{{item.name}}</span>
            </p>
            <p class="goodsMessage hide_other">
              时间：
              <span>{{item.time}}</span>
            </p>
            <p class="goodsMessage hide_other">
              地点：
              <span>{{item.address}}</span>
            </p>
            <p class="goodsMessage hide_other">
              联系：
              <span>{{item.tel}}</span>
            </p>
            <div class="pic">
              <img v-for="(items,indexs) in item.images.slice(0,9)" :key="indexs" :src="items" />
            </div>
            <div class="bottom mt-30">
              <div class="peopleNum l">868人看到</div>
              <div class="clear"></div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="shopList flex_between flex-wrap" v-show='categoryList.length!=0'>
            <div class="shop" v-for="(item,index) in categoryList" :key="index" @click="jump(item)">
              <img :src="item.images" class="shopPic" />
              <div class="ml-20 mr-20" style="width:2.9rem;">
                <div class="name">
                  <p class="hide_other l">{{item.title}}</p>
                  <div class="publicTags l">{{item.quality}}</div>
                  <div class="clear"></div>
                </div>
                <div class="other mb-20">
                  <p>￥{{item.price}}</p>
                  <!-- <p>16人想要</p> -->
                  <div class="clear"></div>
                </div>
                <div class="peopleMessage">
                  <img
                    :src="item.userInfo.userPhoto"
                    class="mPic"
                    @click.stop="$router.push({path:'otherUser',query:{userId:item.userInfo.userId}})"
                  />
                  <div>
                    <h3 class="hide_other">{{item.userInfo.userName}}</h3>
                    <p>
                      <img src="../../public/images/huizhang.png" />
                      信用值&nbsp{{item.userInfo.creditNum}}
                    </p>
                  </div>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <!-- </van-pull-refresh> -->
    </div>
  </div>
</template>

<script>
import storage from "@/common/store";
export default {
  data() {
    return {
      url: "",
      localHistory:storage.getItem('localHistory')? JSON.parse(storage.getItem('localHistory')) :  [],
      size: 10,
      page: 1,
      content: "",
      categoryList: [],
      loading: false,
      finished: false,
      isLoading: false
    };
  },
  created() {
    console.log(this.localHistory)
  },
  methods: {
    searchType() {
      var parm = {
        size: this.size,
        page: 1,
        query: this.content
      };
      console.log(this.$route.query.searchType);
      if (this.$route.query.searchType) {
        this.url = this.$api.searchPosts;
        parm.searchType = this.$route.query.searchType;
        if (this.$route.query.searchType == "0") {
          parm.postCategoryId = "MQ==";
        } else {
          parm.postCategoryId = "Mg==";
        }
      } else {
        this.url = this.$api.searchCommodities;
      }
      console.log(parm);
      this.$get(this.url, parm).then(data => {
        if(data.data.curPageData.length!=0 && this.content){
          let isLocal=true;
          this.localHistory.forEach(item=>{
            if(item==this.content) isLocal=false;
          });
          if(isLocal){
            this.localHistory.push(this.content);
            storage.setItem('localHistory',JSON.stringify(this.localHistory));
          } 
        };
        if((Number(this.page)-1)*this.size<data.data.totalNum){
          if (this.$route.query.searchType) {
            data.data.curPageData.forEach((item, index, array) => {
              array[index] = JSON.parse(item.content);
              array[index].postId = item.postId;
              array[index].thumbUpNum = item.thumbUpNum;
              array[index].commentNum = item.commentNum;
              array[index].userInfo = item.userInfo;
              array[index].dbCreateTime = this.ConvertIso(item.dbCreateTime);
              array[index].txtStatus = true;
              array[index].images = JSON.parse(item.images);
            });
          } else {
            data.data.curPageData.forEach((item, index) => {
              data.data.curPageData[index].images = JSON.parse(item.images)[0];
            });
          }
          this.categoryList = data.data.curPageData;
          this.page = 2;
          this.$forceUpdate();
          this.loading = false;
        }else{
            this.loading = false;
            this.finished = true;
        }
      });
    },
    onLoad() {
      setTimeout(() => {
        var parm = {
          size: this.size,
          page: this.page,
          query: this.content
        };
        console.log(this.$route.query.searchType);
        if (this.$route.query.searchType) {
          this.url = this.$api.searchPosts;
          parm.searchType = this.$route.query.searchType;
          if (this.$route.query.searchType == "0") {
            parm.postCategoryId = "MQ==";
          } else {
            parm.postCategoryId = "Mg==";
          }
        } else {
          this.url = this.$api.searchCommodities;
        }
        this.$get(this.url, parm).then(data => {
          if((Number(this.page)-1)*this.size<data.data.totalNum){
            if (this.$route.query.searchType) {
              data.data.curPageData.forEach((item, index, array) => {
                array[index] = JSON.parse(item.content);
                array[index].postId = item.postId;
                array[index].thumbUpNum = item.thumbUpNum;
                array[index].commentNum = item.commentNum;
                array[index].userInfo = item.userInfo;
                array[index].dbCreateTime = this.ConvertIso(item.dbCreateTime);
                array[index].txtStatus = true;
                array[index].images = JSON.parse(item.images);
              });
            } else {
              data.data.curPageData.forEach((item, index) => {
                data.data.curPageData[index].images = JSON.parse(item.images)[0];
              });
            }
            for (let i = 0; i < data.data.curPageData.length; i++) {
              this.categoryList.push(data.data.curPageData[i]);
            };
            this.loading = false;
          }else{
            this.loading = false;
            this.finished = true;
          }
          this.page++;
        });
      }, 500);
    },
    gz(userId, follow) {
      let that = this;
      this.vueGz(userId, follow, function() {
        that.searchType();
      });
    },
    jump(item) {
      let path;
      switch (item.status) {
        case 0:
          path = "shopDetail";
          break;
        case 1:
          path = "myShopDetail";
          break;
        case 2:
          path = "shopFinish";
          break;
      }
      this.$router.push({
        path: path,
        query: { categoryId: item.commodityId }
      });
    },
    removeLocal(){
      storage.removeItem("localHistory");
      this.localHistory=[];
      this.$toast.success({message:'清除成功',duration:500})
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  padding-top: 0.3rem;
}
.header .inputNav {
  position: relative;
  /* width: 5.83rem; */
  height: 0.64rem;
  position: relative;
}
.header form{flex:1;}
.header input {
  width: 100%;
  height: 100%;
  font: 0.28rem/0.64rem "微软雅黑";
  color: #999999;
  text-indent: 0.8rem;
  background: #f5f5f5;
  border-radius: 0.32rem;
  border: none;
  outline: none;
  display: block;
}
.header .inputNav::before {
  content: "";
  width: 0.3rem;
  height: 0.3rem;
  background: url("../../public/images/qt_110.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0.3rem;
  top: 0.17rem;
}
.cancel {
  font: 0.3rem/0.64rem "微软雅黑";
  color: #4aace9;
  margin-left: 0.23rem;
}

.title h1 {
  display: block;
  font: 0.32rem/0.5rem "微软雅黑";
  color: #1a1a1a;
}
.title img {
  width: 0.27rem;
  height: 0.28rem;
  display: block;
  margin-top: 0.11rem;
}
.tags li {
  background-color: #f2f2f2;
  height: 0.64rem;
  line-height: 0.64rem;
  text-align: center;
  font-size: 0.28rem;
  color: #555555;
  padding: 0 0.47rem;
  border-radius: 0.32rem;
  margin-bottom: 0.36rem;
  margin-right: 0.5rem;
}

.tieActive::before {
  content: "顶";
  width: 0.45rem;
  height: 0.45rem;
  background-color: #f43711;
  font: 0.24rem/0.45rem "微软雅黑";
  text-align: center;
  border-bottom-right-radius: 0.24rem;
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
}
.goodslq::before {
  content: "已领取";
  background-color: #aaaaaa;
  width: 0.88rem;
  height: 0.42rem;
  text-align: center;
  border-bottom-left-radius: 0.21rem;
  font: 0.2rem/0.42rem "微软雅黑";
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
}
.goodsdlq::before {
  content: "待领取";
  background-color: #24c067;
  width: 0.88rem;
  height: 0.42rem;
  text-align: center;
  border-bottom-left-radius: 0.21rem;
  font: 0.2rem/0.42rem "微软雅黑";
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
}
.tie {
  padding: 0.3rem;
  position: relative;
  border-top: 0.3rem solid #f5f5f5;
}
.tie .top .pic {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  overflow: hidden;
}
.tie .top .txt1 {
  margin-left: 0.25rem;
}
.tie .top .txt1 .title .name {
  font: 0.32rem/0.45rem "微软雅黑";
  color: #4aace9;
  max-width: 1.5rem;
  float: left;
  height: 0.45rem;
}
.tie .top .txt1 .typeName {
  float: left;
  width: 0.64rem;
  height: 0.32rem;
  margin: 0.06rem 0 0 0.2rem;
  border-radius: 0.04rem;
  background-color: #f88222;
  color: #fff;
  text-align: center;
  font: 0.16rem/0.32rem "微软雅黑";
}
.tie .top .txt1 .time {
  font: 0.24rem/0.35rem "微软雅黑";
  color: #999999;
}
.tie .top .btn_gz {
  width: 1.16rem;
  height: 0.46rem;
  display: block;
  margin-top: 0.1rem;
}
.tie .txt2 {
  font: 0.32rem/0.4rem "微软雅黑";
  color: #333333;
  margin: 0.3rem 0;
}
.tie .txt2 .more {
  color: #4aace9;
  margin-left: 0.2rem;
  font: 0.3rem/0.4rem "微软雅黑";
}
.tie .pic img {
  display: inline-block;
  /* height: 1.4rem; */
  margin: 0.04rem 0.05rem 0.1rem 0.05rem;
  /* width: 2.18rem; */
  width:calc((100% - 0.3rem)/3);
}
.tie .bottom {
  font: 0.24rem/0.34rem "微软雅黑";
  color: #aaaaaa;
}
.tie .bottom .otherNum1 {
  float: right;
}
.tie .bottom img {
  display: inline-block;
  width: 0.34rem;
  height: 0.34rem;
  margin-right: 0.1rem;
  margin-bottom: 0.05rem;
}

.goodsMessage {
  font: 0.28rem/0.5rem "微软雅黑";
  color: #333333;
}
.goodsMessage span {
  color: #4aace9;
}

.shopList{background-color: #F0F1F4;padding: 0.3rem;}
  .shopList .shop{background-color: #fff;padding-bottom: 0.2rem;border-radius: 0.12rem;margin-bottom: 0.3rem;}
  .shopList .shop .shopPic{width: 3.3rem;height: 3.3rem;display: block;}
  .shopList .shop .name{font: 0.26rem/0.3rem '微软雅黑';color: #000;margin: 0.23rem 0;}
  .shopList .shop .name p{display: inline-block;max-width:60%;}
  .shopList .shop .other p:nth-of-type(1){float: left;display: block;font: 0.34rem/0.3rem '微软雅黑';color: #F88222;}
  .shopList .shop .other p:nth-of-type(2){float: right;display: block;font: 0.2rem/0.3rem '微软雅黑';color: #999999;}
  .peopleMessage{border-top:1px solid rgba(153,153,153,0.2);padding: 0.2rem 0;}
  .peopleMessage .mPic{width:0.7rem;height: 0.7rem;border-radius: 50%;overflow: hidden;float: left;display: block;}
  .peopleMessage>div{float: left;margin-left: 0.21rem;}
  .peopleMessage>div h3{font: 0.24rem/0.35rem '微软雅黑';color: #4AACE9;width: 1.9rem}
  .peopleMessage>div p{font: 0.2rem/0.35rem '微软雅黑';color:#999999;}
  .peopleMessage>div p img{display: inline-block;width:0.24rem;height: 0.24rem;}
</style>
